<template>
  <div class="loading-button-container">
    <button @click="handleClick" :disabled="isLoading">
      {{ isLoading ? "loading" : "submit" }}
    </button>
    <div class="err">{{ error }}</div>
  </div>
</template>

<script>
export default {
  name: "LoadingButton",
  props: {
    click: Function,
  },
  data() {
    return {
      count: 0,
      isLoading: false,
      error: "sadfsafd",
    };
  },
  methods: {
    // $emit回调形式
    /* handleClick() {
      this.count++;
      this.error = "";
      this.isLoading = true;
      this.$emit("click", (error) => {
        console.log("🚀 ~ this.$emit ~ error:", error);
        this.isLoading = false;
        this.error = error;
      });
    }, */
    // $listeners方式
    /*  async handleClick() {
      this.count++;
      this.error = "";
      this.isLoading = true;
      if (this.$listeners.click) {
        const ret = await this.$listeners.click(this.count);
        this.error = ret;
      }
    }, */
    // props传递函数形式
    async handleClick() {
      this.count++;
      this.error = "";
      this.isLoading = true;
      if (this.click) {
        const ret = await this.click(this.count);
        this.isLoading = false;
        this.error = ret;
      }
    },
  },
};
</script>

<style scoped lang="less">
.loading-button-container {
  .err {
    color: red;
    font-size: 12px;
  }
}
</style>
